<%-- 
    Document   : Mantenimiento
    Created on : 30-jul-2012, 16:32:59
    Author     : Administrador
--%>

<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Principal</title>
         <script type="text/javascript">
            function createXMLHttpRequest() {
                var xmlHttp;
                if (window.ActiveXObject) {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else if (window.XMLHttpRequest) {
                    xmlHttp = new XMLHttpRequest();
                }
                return xmlHttp;
            }
            function initRequest(){
                var xhr = createXMLHttpRequest();
                var cadenaInicial = document.getElementById('cajaTexto');
                xhr.open("GET", "../Controlador?accion=autoComplete&cadenaInicial="+cadenaInicial.value, true);
                xhr.onreadystatechange= function(){
                    manejador(xhr);
                }
                xhr.send(null);

            }
            function manejador(xmlHttp){

                var refTabla, tagRespuestaNombre, tagRespuestaId,tagRespuestaCantidadVisitas,tagRespuestaCanciones,tagRespuestaGenero,tagRespuestaUrl;
                var elementoTdUno,elementoTdUno2,elementoTdUno3,elementoTdUno4,elementoUrl,elementoB,elementoTr,elementoTr2, elementoA,elementoAnio,elementoNombre,elementoCan;
                var elementoTxtNombre;
                var resp;
                if(xmlHttp.readyState==4){

                    if(xmlHttp.status==200){
                        refTabla = document.getElementById("info");
                        resp  = xmlHttp.responseXML;

                        tagRespuestaNombre = resp.getElementsByTagName("nombre");
                        tagRespuestaId = resp.getElementsByTagName("anio");
                        tagRespuestaCantidadVisitas = resp.getElementsByTagName("cantvisitas");
                        tagRespuestaCanciones=resp.getElementsByTagName("nombrecancion");
                        tagRespuestaGenero=resp.getElementsByTagName("genero");
                        tagRespuestaUrl=resp.getElementsByTagName("url");
                      
                        while((refTabla.childNodes.length)!=0){
                                refTabla.removeChild(refTabla.firstChild);
                        }
                          elementoAnio =document.getElementById("cajaTexto2");
                              
                        for(var i=0; i < tagRespuestaNombre.length; i++ ){
                            
                            
                             elementoAnio.setAttribute("value",""+tagRespuestaId[i].firstChild.nodeValue);
                             elementoNombre=document.getElementById("cajaTexto3");
                             elementoNombre.setAttribute("value",""+ tagRespuestaNombre[i].firstChild.nodeValue);
                             elementoCan=document.getElementById("cajaTexto4");
                             elementoCan.setAttribute("value",""+ tagRespuestaCantidadVisitas[i].firstChild.nodeValue);
                             elementoTdUno = document.createElement("td");
                             elementoTr = document.createElement("tr");
                            elementoA=document.createElement("a");
                            elementoTxtNombre = document.createTextNode(tagRespuestaNombre[i].firstChild.nodeValue);

                            elementoA.appendChild(elementoTxtNombre);
                            elementoA.setAttribute("href","Controlador?accion=tarea&id="+tagRespuestaId[i].firstChild.nodeValue);
                            elementoA.style.textDecoration="none";
                            elementoA.style.color="black";
                           
                        }
                            var elementoTh=document.createElement("th");
                          var elementoTh2=document.createElement("th");
                          var elementoTh3=document.createElement("th");
                          var elementoTh4=document.createElement("th");
                            elementoTh.innerHTML="Nombre";
                            elementoTh2.innerHTML="Duracion";
                            elementoTh3.innerHTML="URL";
                             elementoTh4.innerHTML="Opciones";
                           
                               elementoTr.appendChild(elementoTh);
                            elementoTr.appendChild(elementoTh2);
                            elementoTr.appendChild(elementoTh3);
                            elementoTr.appendChild(elementoTh4);
                          
                         refTabla.appendChild(elementoTr);
                            for(var i=0; i <tagRespuestaCanciones.length; i++ ){
                                        elementoTdUno = document.createElement("td");
                            elementoTdUno2 = document.createElement("td");
                            elementoTdUno3 = document.createElement("td");
                            elementoTdUno4 = document.createElement("td");
                            elementoTr2 = document.createElement("tr");
                            elementoA=document.createElement("a");
                            elementoUrl=document.createElement("a");
                            elementoB=document.createElement("a");
                            elementoA.innerHTML="Modificar";
                             elementoB.innerHTML="Eliminar";
                                 
                            elementoA.setAttribute("href","#");
                              elementoA.setAttribute("onclick","mostrarNew()");
                            elementoB.setAttribute("onclick","mostrarEliminar()");
                            elementoB.setAttribute("href","#");
                            elementoTdUno.innerHTML=""+tagRespuestaCanciones[i].firstChild.nodeValue
                            elementoTdUno2.innerHTML=""+tagRespuestaGenero[i].firstChild.nodeValue;
                            elementoUrl.innerHTML="link de la musica";
                            elementoUrl.setAttribute("href",""+tagRespuestaUrl[i].firstChild.nodeValue);
                             elementoTdUno3.appendChild(elementoUrl);
                            elementoTdUno4.appendChild(elementoA);
                             elementoTdUno4.appendChild(elementoB);
                            elementoTr2.appendChild(elementoTdUno);
                            elementoTr2.appendChild(elementoTdUno2);
                            elementoTr2.appendChild(elementoTdUno3);
                            elementoTr2.appendChild(elementoTdUno4);
                            refTabla.appendChild(elementoTr2);
                            }    
                    }
                }
            }
                     function initRequestAdd(){
                var xhr = createXMLHttpRequest();
                var cadenaInicial7 = document.getElementById('cajaTexto7');
                var cadenaInicial8 = document.getElementById('cajaTexto8');
                var cadenaInicial9 = document.getElementById('cajaTexto9');
                var cadenaInicial10 = document.getElementById('cajaTexto10');
                var cadenaInicial11 = document.getElementById('cajaTexto11');
                var cadenaInicial =document.getElementById('cajaTexto');
                  var visible=document.getElementById("ingresar").style.display="none";
                  var visible2=document.getElementById("wrapper").style.opacity="1";
                xhr.open("GET", "../Controlador?accion=agregar&cadenaInicial="+cadenaInicial.value+"&cadenaInicial7="+cadenaInicial7.value+"&cadenaInicial8="+cadenaInicial8.value+"&cadenaInicial9="+cadenaInicial9.value+"&cadenaInicial10="+cadenaInicial10.value+"&cadenaInicial11="+cadenaInicial11.value,true);
                
                xhr.onreadystatechange= function(){
                    manejador(xhr);
                }
                
                xhr.send(null);

            }
                function initRequestDelete(){
                var xhr = createXMLHttpRequest();
                var cadenaInicial = document.getElementById('cajaTexto5');
                var cadenaInicial2 =document.getElementById('cajaTexto');
                var visible=document.getElementById("eliminar").style.display="none";
                var visible2=document.getElementById("wrapper").style.opacity="1";
                xhr.open("GET", "../Controlador?accion=eliminar&cadenaInicial="+cadenaInicial2.value+"&cadenaInicial2="+cadenaInicial.value,true);
                
                xhr.onreadystatechange= function(){
                    manejador(xhr);
                }
                
                xhr.send(null);

            }
       function mostrarEliminar(){
           
            
                
        var visible=document.getElementById("eliminar");
        var visible2=document.getElementById("wrapper");
        visible2.style.opacity="0.5";
        visible.style.display="block";
        }
        function mostrarNew(){    
        var visible=document.getElementById("ingresar");
        var visible2=document.getElementById("wrapper");
        visible2.style.opacity="0.5";
        visible.style.display="block";
        }
        function cancelar(){
       var visible=document.getElementById("eliminar");
       var visible3=document.getElementById("ingresar");
        var visible2=document.getElementById("wrapper");
         visible2.style.opacity="1";
         visible3.style.display="none";
        visible.style.display="none";
        }

        </script>
        <link rel="stylesheet" type="text/css" href="principal2.css" id="css1"/> 
         <style>
             #wrapper{
                 position:relative;
                 left:10%;
                 top:20%;
                 width:80%;
                 height:100%;
                 background:tan;
             }
             #eliminar{
                 position:absolute;
                 top:50%;
                 left:40%;
                 height:20%; 
                  padding:5%;
                 float:left;
                 display:none;
                background-color: gray;
             }
                  #actualizar{
                 position:absolute;
                 top:50%;
                 left:40%;
                 height:20%; 
                  padding:5%;
                 float:left;
                 display:none;
                background-color: gray;
             }
              #ingresar{
                 position:absolute;
                 top:10%;
                 left:40%;
                 height:50%; 
                 padding:5%;
                 float:left;
                 display:none;
                 background-color: gray;
             }
             
             
             </style>
    </head>
    <body>
    <section id="wrapper">
            <h2>Mantenimiento de la pagina</h2>
        <form action="../Controlador">
            <p>Ingrese el codigo del album: <input type="text" id="cajaTexto" name="cadenaInicial" /> <input type="button" value="Consultar" onclick="initRequest();"  /></p>
            <input type="hidden" name="accion" value="todos"/>
            <p>El año del album es: <input type="text" id="cajaTexto2" name="cadenaInicial3" /></p>
            <p>El nombre del album es: <input type="text" id="cajaTexto3" name="cadenaInicial4" /></p>
            <p>La cantidad de visitas es: <input type="text" id="cajaTexto4" name="cadenaInicial5" /> </p>
            <p>La canciones del album son:</p>
        
       
        <table id="table">
            <tbody id="info"></tbody>
        </table>
            </section>  
        <section id="eliminar">
            <p>Ingrese el codigo de la cancion a eliminar</p>
          <input type="text" id="cajaTexto5" name="cadenaInicial2" /> 
        
        <input type="button" value="Aceptar" onclick="initRequestDelete()"/>
        <input type="button" value="Cancelar" onclick="alert('¿Estas seguro que quieres cancelar?');cancelar()"/> 
        </section>
         <section id="actualizar">
            <p>Ingrese el codigo de la cancion a eliminar</p>
          <input type="text" id="cajaTexto6" name="cadenaInicial2" /> 
        
        <input type="button" value="Aceptar" onclick="initRequestDelete()"/>
        <input type="button" value="Cancelar" onclick="alert('¿Estas seguro que quieres cancelar?');cancelar()"/> 
        </section>
         <section id="ingresar">
          <p>Ingrese el nombre de la cancion</p>
          <input type="text" id="cajaTexto7" name="cadenaInicial2" /> 
          <p>Ingrese el genero</p>
          <input type="text" id="cajaTexto8" name="cadenaInicial2" /> 
          <p>Ingrese la duracion de la cancion</p>
          <input type="text" id="cajaTexto9" name="cadenaInicial2" />
          <p>Ingrese el url del corto de la cancion</p>
          <input type="text" id="cajaTexto10" name="cadenaInicial2" />
          <p>Ingrese la cantidad de visitas de la cancion</p>
          <input type="text" id="cajaTexto11" name="cadenaInicial2" />
        <input type="button" value="Aceptar" onclick="initRequestAdd()"/>
        <input type="button" value="Cancelar" onclick="alert('¿Estas seguro que quieres cancelar?');cancelar()"/> 
        </section>
        
        </form>
    </body>
</html>

